<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <style type="text/css">
        .navlist {
            position: absolute;
            top: 10px;
        }

        a {
            text-decoration: none;
            color: White;
        }

        .navlist a {
            margin-left: 60px;
            color: #666;
        }

        .expand {
            height: 0px;
            background-color: #333d4d;
            overflow: hidden;
            position: relative;
            top: 30px;
            width: 100%;
        }

        .expdiv {
            height: 130px;
            width: 500%;
        }

        .expdiv-list {
            width: 20%;
            text-align: center;
            float: left;
            line-height: 110px;
            color: White;
        }

        .expand .close-btn {
            width: 120px;
            height: 20px;
            background: url(http://img.mukewang.com/5461ba3b0001ee3603840154.jpg) no-repeat -13px -117px;
            position: absolute;
            left: 50%;
            bottom: -2px;
            margin-left: -60px;
            cursor: pointer;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#menuList").on("click", "a", function () {
                // 模拟点击closeBtn按钮

                if ($(this).hasClass("btn-active")) {

                    $("#expandZone #closeBtn").click();

                    return false;

                }

                var curIndex = $(this).index(), mlValue = "-" + curIndex * 100 + "%";
                if ($("#expandZone").hasClass("active")) {
                    //	给expdiv类元素赋予动画切换的效果
                    $("#expandZone .expdiv").animate({ marginLeft: mlValue });
                }
                else {
                    $("#expandZone .expdiv").css({ marginLeft: mlValue });
                    $("#expandZone").animate({ height: "130px" }).addClass("active");
                }
                //	为当前元素添加"btn-active"样式，同时移除同级其它元素的"btn-active"样式

                $(this).addClass("btn-active").siblings().removeClass("btn-active");

                return false;
            });

            $("#expandZone #closeBtn").on("click", function () {
                $("#expandZone").animate({ height: "0px" }, function () {
                    $(this).removeClass("active");
                    $("#menuList .btn-active").removeClass("btn-active");
                });
                return false;
            });
        });
    </script>
</head>

<body>
    <div id="menuList" class="navlist">
        <a href="#">首页</a> <a href="#">课程大厅</a> <a href="#">学习中心</a> <a href="#">个人中心</a>
        <a href="#">关于我们</a>
    </div>
    <div id="expandZone" class="expand">
        <div class="expdiv">
            <div class="expdiv-list">
                <a href="#">慕课网主页</a>
            </div>
            <div class="expdiv-list">
                <a href="#" id="A4">前端课程</a> <a href="#">手机开发</a> <a href="#">后台编程</a>
            </div>
            <div class="expdiv-list">
                <a href="#">Javascript</a> <a href="#">CSS</a> <a href="#">JQuery</a>
            </div>
            <div class="expdiv-list">
                个人信息：
            </div>
            <div class="expdiv-list">
                公司地址：北京市西城区德外大街10号
            </div>
        </div>
        <div id="closeBtn" class="close-btn">
        </div>
    </div>
</body>

</html>